<template>
  <div class="form_bar">
    <el-form ref="formRef" :model="form" :inline="true" label-width="auto">
      <el-row class="el_filter_row" :gutter="20">
        <el-col :span="8"
          ><el-form-item label="标题"><el-input v-model="form.title" placeholder="输入标题进行查找"></el-input> </el-form-item
        ></el-col>
        <el-col :span="8"
          ><el-form-item label="发布渠道">
            <el-select v-model="form.release_channel" placeholder="全部">
              <el-option label="全部" value="-1"></el-option>
              <el-option label="短信" value="1" disabled></el-option>
              <el-option label="企微群消息" value="2"></el-option>
            </el-select> </el-form-item
        ></el-col>
        <!-- 群主/创建人 -->
        <el-col :span="8">
          <el-form-item label="群主/创建人">
            <el-select v-model="form.created_uids" placeholder="全部" multiple @click="openDepart" @change="changeDepart" popper-class="zw-hide_select_option">
              <el-option v-for="item in creators" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 发送日期 -->
        <el-col :span="8">
          <el-form-item label="发送日期" class="selectTime">
            <div class="picker_time">
              <el-date-picker v-model="form.createTime" style="width: 100%" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" start-placeholder="开始时间" end-placeholder="结束时间" @change="changeDate" />
            </div> </el-form-item
        ></el-col>
        <el-col :span="24">
          <!-- 发布渠道 -->
          <el-form-item>
            <el-button type="primary" @click="submitForm(formRef)">查询</el-button>
            <el-button @click="resetForm(formRef)">清空</el-button>
            <el-button type="text" :icon="visible ? ArrowDownBold : ArrowUpBold" @click="pickUp">{{ visible ? '收起' : '展开' }}</el-button>
          </el-form-item></el-col
        >
      </el-row>
    </el-form>
    <!-- 部门人员弹框 -->
    <ZWDepart ref="DepartRef" @submit="getDepart" :type="1" />
  </div>
</template>

<script setup lang="ts">
  import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
  import { ref, reactive, computed, watch } from 'vue'
  import type { ElForm } from 'element-plus'

  type FormInstance = InstanceType<typeof ElForm>
  import { DFormat, getSetionId, AFold } from '@/utils/utils'
  import ZWDepart from '@/components/ZWDepart.vue'

  const searchSelectRef = ref<null | HTMLElement>(null)
  const DepartRef = ref<null | HTMLElement>(null)

  const emit = defineEmits(['submit','getTableH'])

  import { useStore } from '@/store'
  const store = useStore()

  const formRef = ref<FormInstance>()
  // 创建人options
  const creators = ref([])

  const form = reactive({
    title: '',
    release_channel: '-1',
    created_uids: [],
    send_time: '',
    createTime: [],
    start_time: '',
    end_time: ''
  })
  const visible = ref(true)
  const pickUp = () => {
    visible.value = !visible.value
    AFold(visible.value, '.el_filter_row')
    emit('getTableH')
  }
  //打开新建选择人
  const openDepart = () => {
    // DepartRef.value.depart = DepartRef.value.clean(DepartRef.value.depart)
    // creators.value.forEach((item: any) => {
    //   DepartRef.value.leftchecktree(item.id)
    // })
    DepartRef.value.departVisble = true
    DepartRef.value.selectedMember = creators.value
  }
  // 获取部门成员
  const getDepart = (res: any) => {
    creators.value = res
    form.created_uids = getSetionId('id', creators.value)
    DepartRef.value.departVisble = false
  }
  const changeDepart = (data: any) => {
    let removeDepart = creators.value.find((item: any) => !data.includes(item.id))
    let arr: any[] = creators.value.filter((item: any) => data.includes(item.id))
    form.created_uids = getSetionId('id', arr)
    creators.value = arr
    DepartRef.value.removeItem(removeDepart)
  }
  // 提交查询
  const submitForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.validate((valid) => {
      if (!valid) return
      if (form.createTime == null) {
        form.send_time = ''
        form.end_time = ''
        form.start_time = ''
      } else if (form.createTime.length) {
        form.send_time = form.createTime.join('~')
        form.end_time = form.createTime[1]
        form.start_time = form.createTime[0]
      } else {
        form.send_time = ''
        form.end_time = ''
        form.start_time = ''
      }
      let { createTime, ...param } = JSON.parse(JSON.stringify(form))
      emit('submit', param)
    })
  }
  //重置
  const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
    form.title = ''
    form.release_channel = '-1'
    form.created_uids = []
    form.createTime = []
    form.send_time = ''
    creators.value = []
    DepartRef.value.removeItem(form.created_uids)
    emit('submit', form)
  }
  const changeDate = () => {
    if (!form.createTime) {
      form.send_time = ''
    }
  }
</script>

<style lang="scss" scoped>
  .form_bar {
    background: #f9f9f9;
    padding: 16px 24px;
    :deep .el-form-item__label-wrap {
      margin-left: 0px !important;
    }
    .el-row {
      display: flex;
      flex-wrap: wrap;
      position: relative;
      box-sizing: border-box;
      margin: -8px -10px;
      .el-col {
        margin: 8px 0;
        &:last-of-type {
          flex: auto;
          text-align: right;
        }
        .el-form-item {
          margin-bottom: 0;
          width: 100%;
          .el-form-item__label-wrap {
            .el-form-item__label {
              font-size: 14px;
              font-family: STHeitiSC-Light, STHeitiSC;
              font-weight: 300;
              color: #33302d;
            }
          }

          .el-form-item__content {
            .el-input,
            .el-select,
            .el-date-editor {
              width: 100%;
            }
          }
        }
      }
    }
  }
</style>
<style lang="scss"></style>
